<template>
  <el-table
      class="table-fixed"
      :data="filterTableData"
      style="width: 100%"
      :border="border"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
      height="80vh"
  >
    <el-table-column
        v-if="selection"
        type="selection"
        align="center"
        width="55">
    </el-table-column>
    <component
        v-for="(item,index) in columnOption"
        :key="index"
        v-bind="item"
        :is="item.type || 'textColumn'"
        :patchEvent="patchEvent"
        @changeTableData="changeTableData(arguments)"
    >
    </component>
  </el-table>
</template>

<script>
// 加载所有./ColumnComponent下组件
let compos = {}
const modules = require.context('./ColumnComponent', false, /.vue$/)
for (let item of modules.keys()) {
  compos[item.match(/.*\.\/(.*).vue$/)[1]] = modules(item).default
}

export default {
  name: "Bom-Table",
  props: {
    // 筛选过表格数据
    filterTableData: {
      type: Array,
      default() {
        return []
      }
    },
    // 是否带边框
    border: {
      type: Boolean,
      default() {
        return true
      }
    },
    // 表格列配置
    columnOption: {
      type: Array,
      default() {
        return [];
      }
    },
    // 是否多选
    selection: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
    }
  },
  components: {
    ...compos
  },
  methods: {
    // 分发事件,将子组件的事件传递到父组件
    patchEvent(event,args) {
      this.$emit(event, args)
    },
    // 中转事件，向上传递
    changeTableData(setionData){
      this.$emit('changeTableData',...setionData)
    },
    // 多选选择事件
    handleSelectionChange(val) {
      this.$emit('selectionChangeEvent', val)
    },
    // 排序点击事件
    sortChange(param) {
      this.$emit('sortChangeEvent', param)
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 10px;
}
</style>

<style lang="scss">
.el-table__body {
  width: 100%;
  table-layout: fixed !important;
}
</style>
